<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收藏中心</title>
<%@ include file="/page/pc/include.jsp"%>

<!-- Bootstrap-select -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/plugins/bootstrap-select-1.12.3/css/bootstrap-select.min.css" />
<!-- Bootstrap-select -->
<script type="text/javascript" src="<%=basePath%>/statics/plugins/bootstrap-select-1.12.3/js/bootstrap-select.min.js"></script>
</head>
<body>
	<div class="wrap">
		<jsp:include page="../_my_header.jsp" />
		<div class="site_wrap18">
			<div class="site_wrap18_con">
				<div class="main">
					<jsp:include page="../_my_left.jsp" />
					<div class="rightitem">

						<div class="shdz_part">
							<div class="shdz_part_con">
								<div class="hd">
									<c:if test="${pageBean.totalCount < 20 }">
										<a href="javascript:void(0)" onclick="javascript: openAdd();" class="addaddressbtn"><h3>新增收货地址</h3></a> 
									</c:if>
									<strong>您已创建<b>${pageBean.totalCount}</b>个收货地址，最多可创建<b>20</b>个</strong>
								</div>
								<div class="bd">
									<div class="address_list5">
										<c:choose>
											<c:when test="${empty addressList }">
												<div class="noresult" style="text-align: center;">
													<p>
														<i><img src="<%=basePath%>/statics_wx/images/icon_noaddress.png" /></i> <br> <span>您还没有收货地址~</span>
													</p>
												</div>
											</c:when>
											<c:otherwise>
												<form action="<%=basePath%>/pc/my/address" method="post" name="addressForm" id="addressForm">
													<ul>
														<c:forEach items="${addressList }" var="address">
															<li>
																<div class="box25">
																	<div class="setting_part">
																		<p>
																			<c:if test="${address.isDefault != 1 }">
																				<a href="#" onclick="javascript: setDefault('${address.id}');">设为默认</a>
																			</c:if>
																			<a href="#" onclick="javascript: doEditAddress('${address.id}');">编辑</a>
																		</p>
																	</div>
																	<h1>
																		${address.receiverName }
																		<c:if test="${address.isDefault == 1 }">
																			<em>默认地址</em>
																		</c:if>
																	</h1>
																	<a href="#" onclick="javascript: doDelAddress('${address.id}');" class="icon_close"></a>
																	<dl>
																		<dt>
																			<strong>收货人：</strong>
																			<div class="txt1">${address.receiverName }</div>
																		</dt>
																		<dt>
																			<strong>所在地区：</strong>
																			<div class="txt1">${address.provinceName}${address.cityName}${address.areaName}${address.streetName}</div>
																		</dt>
																		<dt>
																			<strong>地址：</strong>
																			<div class="txt1">${address.address}</div>
																		</dt>
																		<dt style="width:220px;">
																			<strong>手机：</strong>
																			<div class="txt1">${address.mobile}</div>
																		</dt>
																		<!-- <dt>
																		<strong>邮箱：</strong>
																		<div class="txt1">155001@qq.com</div>
																	</dt> -->
																	</dl>
																</div>
															</li>
														</c:forEach>
													</ul>
												</form>
												<jx:paging formID="addressForm" isShowJumpToButton="true" numPerPage="5" isShowpageCount="true"></jx:paging>
											</c:otherwise>
										</c:choose>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<%-- 删除确认框 begin --%>
	<div class="popbox" id="del_box" style="display: none">
		<div class="del_box">
			<div class="hd">
				<h3>删除</h3>
				<span><a id="btn_close" href="javascript:void(0);" onclick="javascript: $('#del_box').hide();"></a></span>
			</div>
			<div class="bd">
				<div class="del_info">
					<strong> <img src="${rootPath}/statics/images/icon_tip2.png" />
					</strong>
					<div class="del_info_con">
						<h2 id="del_confirm_msg">是否该收货地址？</h2>
						<p>
							<input type="hidden" id="addressId">
							<input id="btn_delete" type="button" class="inputbtn1" value="删除" onclick="javascript: delAddress();"/>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%-- 删除确认框 end --%>
	
	<%-- 新增、编辑收货地址 弹出层 begin --%>
	<div class="popbox" id="addressbox" style="display: none">
		<div class="add_addressbox">
			<div class="hd">
				<h3>收货人信息</h3>
				<span> <a href="#" onclick="javascript: $('#addressbox').hide();"></a>
				</span>
			</div>
			<div class="bd">
				<form action="<%=basePath%>/pc/my/address/saveAddress" name="addAddressForm" id="addAddressForm" method="post" onsubmit="return doCheckAddress();">
					<div class="add_addressform">
						<dl>
							<dt>
								<strong><em></em>收货地区</strong>
								<div class="txt1">
									<select class="select1" style="width: 120px; font-size: 14px;height:30px;" id="provinceCode" name="provinceCode"><option value="">请选择</option></select> <select
										class="select1" style="width: 120px; font-size: 14px;height:30px;" id="cityCode" name="cityCode"><option value="">请选择</option></select> <select
										class="select1" style="width: 120px; font-size: 14px;height:30px;" id="areaCode" name="areaCode"><option value="">请选择</option></select> <select
										class="select1" style="width: 120px; font-size: 14px;height:30px;" id="streetCode" name="streetCode"><option value="">请选择</option></select>
								</div>
							</dt>
							<dt>
								<strong><em></em>详细地址</strong>
								<div class="txt1">
									<input type="text" id="address" name="address" class="inputstyle1" />
								</div>
							</dt>
							<dt>
								<strong><em></em>收货人</strong>
								<div class="txt1">
									<input type="text" id="receiverName" name="receiverName" class="inputstyle1" />
								</div>
							</dt>
							<dt>
								<strong><em></em>手机号码</strong>
								<div class="txt1">
									<input type="text" id="mobile" name="mobile" class="inputstyle1" />
								</div>
							</dt>
							<!-- <dt>
								<strong>邮箱地址</strong>
								<div class="txt1">
									<input type="text" class="inputstyle1" />
								</div>
							</dt> -->
							<dt>
								<strong>&nbsp;</strong>
								<div class="txt1">
									<input type="submit" class="inputbtn1" value="保存收货人信息" />
								</div>
							</dt>
						</dl>
					</div>
					<input type="hidden" id="id" name="id" />
					<input type="hidden" id="isDefault" name="isDefault" />
					<!-- 选择区域所需隐藏域 -->
					<input type="hidden" id="provinceName" name="provinceName" /> 
					<input type="hidden" id="cityName" name="cityName" /> 
					<input type="hidden" id="areaName" name="areaName" /> 
					<input type="hidden" id="streetName" name="streetName" />
				</form>
			</div>
		</div>
	</div>
	<%-- 新增、编辑收货地址 弹出层 end --%>

	<!---网站底部开始-->
	<div>
		<jsp:include page="../../footer.jsp?showQaFlag=0" />
	</div>
	<!---网站底部结束-->
	<script type="text/javascript">
		/**
		 * 定义下拉列表加载
		 */
		var selectpicker = function(config) {
			if (typeof config == 'object') {
				if (!config['id'] || !config['url']) {
					return false;
				}
				var defaults = {
					param : {},
					defaultValue : null,
					valueField : 'id',
					textField : 'text',
					defaultAll : false,
					async : true, // 默认异步加载
					loadSuccess : function(data) {
					} // 数据加载成功的回调事件
				};
				config = $.extend(defaults, config || {});
				var $select = $('#' + config.id);
				$.ajax({
					type : 'post',
					url : config.url,
					async : config.async,
					data : config.param,
					dataType : 'json',
					success : function(result) {
						$select.html('');
						if (config.defaultAll) {
							$select.append('<option value="" >请选择</option>');
						}
						var data = result.data || result.rows || result.list || result;
						$.each(data, function(index, row) {
							var value = row[config.valueField];
							var text = row[config.textField];
							if(config.defaultValue && value == config.defaultValue) {
								$select.append('<option value="' + value + '" selected="selected" >' + text + '</option>');
							} else {
								$select.append('<option value="' + value + '" >' + text + '</option>');
							}
						});
						//数据加载成功之后的回调事件
						config.loadSuccess(data); 
					}
				})
			}
		};
		/**
		 * 打开新增窗口
		 */
		function openAdd() {
			$("#id").val('');
			$("#provinceCode").val('');
			$("#provinceName").val('');
			$("#cityCode").val('');
			$("#cityName").val('');
			$("#areaCode").val('');
			$("#areaName").val('');
			$("#streetCode").val('');
			$("#streetName").val('');
			$("#receiverName").val('');
			$("#address").val('');
			$("#mobile").val('');
			$("#isDefault").val('');
			
			initAreaCombo(null, null, null, null);
			$('#addressbox').show();
		}

		/**
		 * 初始化省市区街道下拉列表
		 */
		function initAreaCombo(provinceId, cityId, areaId, streetId) {
			if(provinceId && cityId && areaId && streetId) {
				//编辑，初始化-省市区街道
				selectpicker({
					id : 'provinceCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						rootDepth : 1
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultAll : false,
					defaultValue : provinceId
				});
				//市
				selectpicker({
					id : 'cityCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : provinceId
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultAll : false,
					defaultValue : cityId
				});
				//区
				selectpicker({
					id : 'areaCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : cityId
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultAll : false,
					defaultValue : areaId
				});
				//街道
				selectpicker({
					id : 'streetCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : areaId
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultAll : false,
					defaultValue : streetId
				});
			} else {
				//新增，只需要初始化-省
				selectpicker({
					id : 'provinceCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						rootDepth : '1'
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultAll : false,
					defaultValue : provinceId
				});
			}
			
			// 省改变，加载市
			$("#provinceCode").change(function() {
				// 获取省ID值
				var provinceValue = $("#provinceCode").val();
				// 清空市下拉框
				$("#cityCode").empty();
				// 清空区下拉框
				$("#areaCode").empty();
				// 清空街道下拉框
				$("#streetCode").empty();
				if (!provinceValue) {
					return;
				}
				// 加载市数据
				selectpicker({
					id : 'cityCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : provinceValue
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultValue : cityId,
					defaultAll : true
				});
			});
	
			// 市改变，加载区
			$("#cityCode").change(function() {
				// 获取市ID值
				var cityCode = $("#cityCode").val();
				// 清空区下拉框
				$("#areaCode").empty();
				// 清空街道下拉框
				$("#streetCode").empty();
				if (!cityCode)
					return;
				// 加载市数据
				selectpicker({
					id : 'areaCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : cityCode
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultValue : areaId,
					defaultAll : true
				});
			});
			// 区改变，加载街道
			$("#areaCode").change(function() {
				// 获取市ID值
				var areaCode = $("#areaCode").val();
				// 清空区下拉框
				$("#streetCode").empty();
				if (!areaCode){
					return;
				}
				// 加载市数据
				selectpicker({
					id : 'streetCode', // select的id
					url : rootPath + "/area/getAreaList", // 请求数据的远程地址
					param : {
						parentId : areaCode
					}, // 过滤参数
					valueField : 'id',
					textField : 'areaName',
					defaultValue : streetId,
					defaultAll : true
				});
			});
	
			/**
			 * 省份
			 */
			$("#provinceCode").change(function() {
				$("#provinceName").val($("#provinceCode option:selected").text());
			});
			/**
			 * 城市
			 */
			$("#cityCode").change(function() {
				$("#cityName").val($("#cityCode option:selected").text());
			});
			/**
			 * 街道
			 */
			$("#areaCode").change(function() {
				$("#areaName").val($("#areaCode option:selected").text());
			});
			/**
			 * 街道
			 */
			$("#streetCode").change(function() {
				$("#streetName").val($("#streetCode option:selected").text());
			});
		}
		
		/**
		 * 打开地址编辑窗口
		 */
		function doEditAddress(addressId) {
			if (addressId != "" && addressId != null) {
				//该地址是否是免费地址
				$.ajax({
					type: 'POST',
					url: rootPath + "/deliveryAddress/isFreeExpressAddress",
					data:{addressId: addressId},
					dataType: 'json',
					success: function(data){
						if (data.resultCode == "1") {
							layer.confirm("该地址为免运费地址，修改后需要重新申请，是否修改？", {
								title: '删除',
								btn: ['确定','取消'], //按钮
								skin: 'del-class' //样式类名
							}, function(index){
								getAddressInfo(addressId);
								parent.layer.close(index);
							});
						} else {
							getAddressInfo(addressId);
						}
					}
				});
			} else {
				//新增地址
				getAddressInfo(addressId);
			}
		}
		
		function getAddressInfo(addressId) {
			if (addressId) {
				$.ajax({
					type : "post",
					url : rootPath + '/pc/my/address/getAddressById',
					data : {
						addressId : addressId
					},
					async : false,
					datatype : "json",
					success : function(json) {
						if (json.code == '1' && json.data) {
							var address = json.data;
							initAreaCombo(address.provinceCode, address.cityCode, address.areaCode, address.streetCode)
							$("#id").val(address.id);
							$("#provinceCode").val(address.provinceCode);
							$("#provinceName").val(address.provinceName);
							$("#cityCode").val(address.cityCode);
							$("#cityName").val(address.cityName);
							$("#areaCode").val(address.areaCode);
							$("#areaName").val(address.areaName);
							$("#streetCode").val(address.streetCode);
							$("#streetName").val(address.streetName);
							$("#receiverName").val(address.receiverName);
							$("#address").val(address.address);
							$("#mobile").val(address.mobile);
							$("#isDefault").val(address.isDefault);
							$('#addressbox').show();
						} else {
							layer.msg(json.msg, {
								icon : 2,
								time : 2000
							});
						}
					},
					error : function() {
						layer.msg('获取地址信息错误', {
							icon : 2,
							time : 2000
						});
					}
				});
				
				
			} else {
				layer.msg('获取地址信息错误', {
					icon : 2,
					time : 1000
				});
			}
		}
		
		/**
		 * 校验地址表单
		 */
		function doCheckAddress() {
			var provinceCode = $("#provinceCode").val();
			var cityCode = $("#cityCode").val();
			var areaCode = $("#areaCode").val();
			var streetCode = $("#streetCode").val();
			var provinceName = $("#provinceName").val();
			var cityName = $("#cityName").val();
			var areaName = $("#areaName").val();
			var streetName = $("#streetName").val();
			if (!provinceCode || !cityCode || !areaCode || !streetCode || !provinceName || !cityName || !areaName
					|| !streetName) {
				layer.msg('请重新选择所在地区（省/市/区/街道）', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			if (!$("#address").val()) {
				layer.msg('请输入您的详细地址', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			if (address.length > 200) {
				layer.msg('地址不能超过200个字符', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			var receiverName = $("#receiverName").val();
			if (!receiverName) {
				layer.msg('请输入收货人姓名');
				return false;
			}
			if (receiverName.length > 20) {
				layer.msg('收货人姓名不能超过20个字符', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			/*
			if (!(/^[\u4e00-\u9fa5]+$/.test(receiverName))) {
				layer.msg('姓名必须为中文');
				return false;
			}
			*/
			var mobile = $("#mobile").val();
			if (!mobile) {
				layer.msg('请输入您的联系方式', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			if (!(/^1\d{10}$/.test(mobile))) {
				layer.msg('请输入正确的联系方式', {
					icon : 2,
					time : 2000
				});
				return false;
			}
			return true;
		}

		/**
		 * 设置默认地址
		 */
		function setDefault(addressId) {
			if (addressId) {
				$.ajax({
					type : "post",
					url : rootPath + '/pc/my/address/doSetDefault',
					data : {
						addressId : addressId
					},
					async : false,
					datatype : "json",
					success : function(json) {
						if (json.code == '1') {
							layer.msg(json.msg, function() {
								window.location.href = rootPath + "/pc/my/address";
							}, {
								icon : 2,
								time : 500
							});
						} else {
							layer.msg(json.msg, {
								time : 2000
							});
						}
					},
					error : function() {
						layer.msg('设置默认地址失败', {
							time : 1000
						});
					}
				});
			} else {
				layer.msg('请先选择地址', {
					time : 1000
				});
			}
		}
		
		
		function delAddress() {
			var addressId = $("#addressId").val();
			//信息框-例2
			$.ajax({
				type : "post",
				url : rootPath + '/pc/my/address/doDelAddress',
				data : {
					addressId : addressId
				},
				async : false,
				datatype : "json",
				success : function(json) {
					if (json.code == '1') {
						$('#del_box').hide();
						layer.msg(json.msg, function() {
							window.location.href = rootPath + "/pc/my/address";
						});
					} else {
						layer.msg(json.msg, {
							time : 2000
						});
					}
				},
				error : function() {
					layer.msg('设置默认地址失败', {
						time : 1000
					});
				}
			});
		}
		
		
		
		/**
		 * 删除地址
		 */
		function doDelAddress(addressId) {
			if(!addressId) {
				return;
			}
			$("#addressId").val(addressId);
			$('#del_box').show();
		}
	</script>
</body>
</html>